<template>
  <div class="breadCrumb">
    <a-breadcrumb separator=">">
      <a-breadcrumb-item v-for="item in routerList" :key="item.path">
        <a :href="item.path">{{item.name}}</a>
      </a-breadcrumb-item>
    </a-breadcrumb>
  </div>
</template>

<script>
export default {
  name: '',
  data () {
    return {
      routerList: [],
      routerPath: ''
    };
  },
  watch: {
    //监听当前路由的变化
    $route (to, from) {
      console.log(from)
      console.log(to)
      //this.routerList = to.matched
      this.getBreadCrumb(to.matched)
    }
  },
  computed: {

  },
  mounted () {
    console.log(this.$route.matched)
    this.getBreadCrumb(this.$route.matched)
  },
  methods: {
    //得到当前面包屑路径
    getBreadCrumb (matched) {
      console.log(matched)
      if (matched.length && matched[1].name == 'home') {
        matched = [{ path: '/index/home', name: '首页' }]
      }
      this.routerList = matched
    }
  },
  components: {

  },
};
</script>

<style scoped>
.breadCrumb {
  width: 98%;
  height: 30px;
  line-height: 30px;
  background-color: #fff;
  margin: 15px 16px 0;
  padding: 5px;
}
</style>
